<%--
  Created by IntelliJ IDEA.
  User: 27662
  Date: 2024/9/2
  Time: 11:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专家介绍</title>
<%--    <link rel="stylesheet" href="styles.css">--%>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #333;
        }

        header {
            background-color: #00aef0;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 10px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

        main {
            padding: 20px;
        }

        .expert-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .expert-item {
            border: 2px solid #007bff;
            padding: 10px;
            margin: 10px;
            width: calc(33.333% - 22px); /* Adjust based on margin and border */
            box-sizing: border-box;
        }

        .expert-item h2 {
            color: #007bff;
            margin-top: 0;
        }

        .expert-item ul {
            list-style: none;
            padding: 0;
        }

        .expert-item ul li {
            margin-top: 5px;
        }

        footer {
            text-align: center;
            padding: 10px 0;
            background-color: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <ul>
            <li><a href="../jsp/index.jsp">首页</a></li>
            <li><a href="#">公众入口</a></li>
            <li><a href="${pageContext.request.contextPath}/doctor/findDoctorsKe2.do">专家介绍详情页</a></li>
        </ul>
    </nav>
</header>
<main>
    <center><h1>专家介绍</h1></center>
    <div class="expert-list" style="display: flex">
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>呼吸和危重症医学科</h2>
            <ul>
                <li>马靖</li>
                <li>程渊</li>
                <li>王广发</li>
                <li>张红</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>消化内科</h2>
            <ul>
                <li>廖纪萍</li>
                <li>董欣红</li>
                <li>张弛</li>
                <li>江龙</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>心血管内科</h2>
            <ul>
                <li>柳林</li>
                <li>郑波</li>
                <li>王强</li>
                <li>李松</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>内分泌内科</h2>
            <ul>
                <li>张涛</li>
                <li>王伟</li>
                <li>徐东</li>
                <li>徐良</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
    </div>
    <div class="expert-list" style="display: flex">
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>血液内科</h2>
            <ul>
                <li>董玉军</li>
                <li>李渊</li>
                <li>刘微</li>
                <li>欧晋平</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>肾脏内科</h2>
            <ul>
                <li>杨莉</li>
                <li>周福德</li>
                <li>董捷</li>
                <li>陈旻</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>老年病内科</h2>
            <ul>
                <li>刘梅林</li>
                <li>刘新民</li>
                <li>焦红梅</li>
                <li>陈岩</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>风湿免疫科</h2>
            <ul>
                <li>李光韬</li>
                <li>赵娟</li>
                <li>邓雪蓉</li>
                <li>张晓慧</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
    </div>
    <div class="expert-list" style="display: flex">
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>普通外科</h2>
            <ul>
                <li>王伟民</li>
                <li>庄严</li>
                <li>孙策</li>
                <li>刘飞</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>心脏外科</h2>
            <ul>
                <li>王为念</li>
                <li>罗明</li>
                <li>郭大龙</li>
                <li>李星</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>骨科</h2>
            <ul>
                <li>柳雨</li>
                <li>郑象</li>
                <li>范县</li>
                <li>范帅</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
        <div class="expert-item" style="flex: 1;display: flex">
            <h2>儿科</h2>
            <ul>
                <li>张涛</li>
                <li>王伟</li>
                <li>陶喆</li>
                <li>王力宏</li>
                <!-- 更多医生列表 -->
            </ul>
        </div>
    </div>
</main>
<footer>
    <p>版权所有 &copy; 2024 示例医院</p>
</footer>
</body>
</html>
